<template>
    <div class='body'>
        <div class="box">
            <div class="left"></div>
            <div class="right">
                <div class="right-box mb-4">
                    <h1>投票登录</h1>
                    <el-input v-model="zh" class="w-50 m-2" placeholder="输入账号！" :prefix-icon="User"
                        style="width: 300px" /><br>
                    <el-input v-model="psd" type="password" placeholder="输入密码！" show-password :prefix-icon="Lock"
                        style="width: 300px" /><br>
                    <div style="width: 300px;display: flex;align-items: center;justify-content: space-between;">
                        <el-input v-model="yzm" placeholder="输入验证码！" style="width: 100px" />
                        <el-text class="mx-1" type="info">0765</el-text>
                    </div>
                    <el-button type="primary" round style="width: 300px;" @click="dl">登录</el-button>
                    <a style="display: block;margin:25px 0 0 50px;cursor: pointer;" @click="tpzc">没有账号？点击前往注册</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { User, Lock, Message } from '@element-plus/icons-vue'
import { Login } from '@/api/Login/index'
import { useRouter } from "vue-router";
import { useCountStore } from "@/store/count";
import { ElMessage, ElMessageBox } from 'element-plus'
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
const open2 = (data?: any) => {
    if (data) {
        ElMessage({
            message: data,
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }

}
const qxstore = useCountStore()
const router = useRouter()
let psd = ref()
let yzm = ref()
let zh = ref()

let dl = () => {
    if (yzm.value == '0765') {
        Login({
            "id": zh.value,
            "psd": psd.value,
        }).then((res: any) => {
            console.log('res登录', res)
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('qx', res.data.qx)
            qxstore.$patch({
                qx: res.data.qx
            })
            router.push({ path: '/' })
        })
    } else {
        open4("验证码错误")
    }
}
let tpzc = () => {
    router.push({ path: '/zhuce' })
}

onMounted(() => {

})

</script>
<style scoped lang='less'>
.body {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(100, 207, 236);
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .box {
        width: 1000px;
        height: 550px;
        background-color: aliceblue;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left,
        .right {
            width: 50%;
            height: 100%;
        }

        .left {
            background-image: url('@/assets/logo.svg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .right {
            display: flex;
            align-items: center;
            justify-content: space-evenly;



            .right-box {
                width: 400px;
                height: 200px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                margin-top: -100px;

                h1 {
                    color: aquamarine;
                    text-align: center;
                    width: 300px;
                }

                .yz {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>